<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Circular Layout</title>
  </head>

  <body>
    <div id="mountNode"></div>
    <script src="../build/g6.js"></script>
    <script src="./assets/d3-4.13.0.min.js"></script>
    <script>
      const data = {
        nodes: [
          {
            id: '0',
            label: '0',
            x: 100,
            y: 30,
          },
          {
            id: '1',
            label: '1',
            x: 150,
            y: 80,
          },
          {
            id: '2',
            label: '2',
            x: 50,
            y: 80,
          },
        ],
        edges: [
          {
            source: '0',
            target: '1',
          },
          {
            source: '0',
            target: '2',
          },
          {
            source: '2',
            target: '1',
          },
        ],
      };
      const data2 = {
        nodes: [
          {
            id: '0',
            label: '0',
            x: 200,
            y: 130,
          },
          {
            id: 'n1',
            label: 'n1',
            x: 250,
            y: 180,
          },
          {
            id: 'n2',
            label: 'n2',
            x: 150,
            y: 180,
          },
          {
            id: 'n3',
            label: 'n3',
            x: 200,
            y: 210,
          },
        ],
        edges: [
          {
            source: '0',
            target: 'n1',
          },
          {
            source: '0',
            target: 'n2',
          },
          {
            source: 'n2',
            target: 'n1',
          },
          {
            source: 'n2',
            target: 'n3',
          },
        ],
      };

      const graph = new G6.Graph({
        container: 'mountNode',
        width: 1000,
        height: 800,
        animate: true,
        // layout: {
        //   type: 'circular',
        //   center: [500, 300],
        //   radius: 200,
        //   ordering: null
        // },
        defaultNode: {
          size: [20, 20],
          color: 'steelblue',
        },
        defaultEdge: {
          size: 1,
          color: '#e2e2e2',
          style: {
            endArrow: {
              path: 'M 4,0 L -4,-4 L -4,4 Z',
              d: 4,
            },
          },
        },
      });
      graph.data(data);
      graph.render();

      setTimeout(function() {
        graph.changeData(data2);
      }, 3000);
    </script>
  </body>
</html>
